<template>
  <div>
    <Tabs value="shouru" name="secondBox" ref="tabsDefaultValue" @on-click="memberInfoChange">
      <TabPane label="收入" name="shouru" tab="secondBox">
        <Row>
          <Form ref="searchForm" :model="shouruSearchForm" inline :label-width="70" class="search-form">
            <Form-item label="收入类型" prop="start">
              <Select v-model="shouruSearchForm.start" placeholder="请选择" clearable style="width: 200px">
                <Option value="OFFLINE">线下订单</Option>
                <Option value="NORMAL">线上订单</Option>
                <Option value="VIRTUAL">虚拟订单</Option>
              </Select>
            </Form-item>
            <Form-item label="收入时间">
              <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd" clearable @on-change="selectDateRangeShouru" placeholder="选择起始时间" style="width: 300px"></DatePicker>
            </Form-item>
            <Button @click="shouruData" type="primary" icon="ios-search" class="search-btn">搜索</Button>
            <Button class="search-btn" type="primary" @click="handleReset('shouru')">重置</Button>
            <download-excel class="export-excel-wrapper" :data="receiptRecordData" :fields="fields" :fetch="exportOrder" name="销售钱包-收入.xls">
              <Button type="info" class="export"> 导出 </Button>
            </download-excel>
            <div class="totleQuota">
              <p>
                订单焕贝额<span>{{
                  IncomeByPageCount.sumMoney ? IncomeByPageCount.sumMoney : 0
                }}</span>
              </p>
              <p>
                邮费焕贝额<span>{{
                  IncomeByPageCount.sumFreightPrice
                    ? IncomeByPageCount.sumFreightPrice
                    : 0
                }}</span>
              </p>
              <p>
                合计焕贝额<span>{{
                  IncomeByPageCount.sumAllMoney
                    ? IncomeByPageCount.sumAllMoney
                    : 0
                }}</span>
              </p>
            </div>
          </Form>
        </Row>
        <Table :loading="loading" border :columns="shouruColumns" :data="receiptRecordData" class="mt_10" ref="table">
          <template slot="orderSnSlot" slot-scope="scope">
            <a @click="orderDetail(scope.row.orderSn)">{{
              scope.row.orderSn
            }}</a>
          </template>
        </Table>

        <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
          <Page :current="receiptRecordSearchForm.pageNumber" :total="receiptRecordTotal" :page-size="receiptRecordSearchForm.pageSize" @on-change="shouruChangePage" @on-page-size-change="shouruChangePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total show-elevator show-sizer></Page>
        </Row>
      </TabPane>
      <TabPane label="支出" name="zhichu" tab="secondBox">
        <Row>
          <Form ref="searchForm" :model="shouruSearchForm" inline :label-width="70" class="search-form">
            <Form-item label="支出类型" prop="start">
              <Select v-model="shouruSearchForm.start" placeholder="请选择" clearable style="width: 200px">
                <Option value="TRANSFER">转账</Option>
                <Option value="OFFLINE">线下订单</Option>
                <Option value="NORMAL">线上订单</Option>
                <Option value="VIRTUAL">虚拟订单</Option>
                <Option value="WITHDRAWAL">提现</Option>
              </Select>
            </Form-item>
            <Form-item label="支出时间">
              <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd" clearable @on-change="selectDateRangeShouru" placeholder="选择起始时间" style="width: 300px"></DatePicker>
            </Form-item>
            <Button @click="zhichu" type="primary" icon="ios-search" class="search-btn">搜索</Button>
            <Button class="search-btn" type="primary" @click="handleReset('zhichu')">重置</Button>
            <download-excel class="export-excel-wrapper" :data="receiptRecordData" :fields="zhichuFields" :fetch="exportOrderZC" name="销售钱包-支出.xls">
              <Button type="info" class="export"> 导出 </Button>
            </download-excel>
            <div class="totleQuota">
              <p>
                焕贝额<span>{{
                  IncomeByPageCount.sumMoney ? IncomeByPageCount.sumMoney : 0
                }}</span>
              </p>

              <p>
                手续费<span>{{
                  IncomeByPageCount.sumHandlingMoney
                    ? IncomeByPageCount.sumHandlingMoney
                    : 0
                }}</span>
              </p>

              <p>
                对应现金额<span>{{
                  IncomeByPageCount.sumRealMoney
                    ? IncomeByPageCount.sumRealMoney
                    : 0
                }}</span>
              </p>
            </div>
          </Form>
        </Row>
        <Table :loading="loading" border :columns="zhichuColumns" :data="receiptRecordData" class="mt_10" ref="table">
          <template slot="orderSnSlot" slot-scope="scope">
            <a @click="orderDetail(scope.row.orderSn)">{{
              scope.row.orderSn
            }}</a>
          </template>
        </Table>

        <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
          <Page :current="receiptRecordSearchForm.pageNumber" :total="receiptRecordTotal" :page-size="receiptRecordSearchForm.pageSize" @on-change="zhichuChangePage" @on-page-size-change="zhichuChangePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total show-elevator show-sizer></Page>
        </Row>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import region from "@/views/lili-components/region"
import * as API_Member from "@/api/member.js"
import ossManage from "@/views/sys/oss-manage/ossManage"
import liliMap from "@/views/my-components/map/index"
import JsonExcel from "vue-json-excel"
import * as RegExp from "@/libs/RegExp.js"
import * as API_Order from "@/api/order.js"

export default {
  name: "tuiguang",
  components: {
    region,
    ossManage,
    "download-excel": JsonExcel,
    liliMap,
  },
  props: {
    memberId: {
      type: String,
    },
  },
  data () {
    return {
      // 收入表格的表头以及内容
      fields: {
        会员昵称: "nickName",
        手机号码: {
          field: "mobile",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        级别: "gradeIdName",
        区域: {
          field: "locationName",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        流水号: "receivableNo",
        收入时间: {
          field: "incomeTime",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        收入类型: "incomeTypeName",
        订单焕贝额: {
          field: "money",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        邮费焕贝额: {
          field: "freightPrice",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        合计焕贝额: {
          field: "allMoney",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
      },
      //支出表格的表头以及内容
      zhichuFields: {
        会员昵称: "nickName",
        手机号码: {
          field: "mobile",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        级别: "gradeIdName",
        区域: {
          field: "locationName",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        流水号: "receivableNo",
        支出时间: {
          field: "expenditureTime",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        支出类型: "expenditureTypeName",
        焕贝额: {
          field: "money",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        手续费: {
          field: "handlingMoney",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        对应现金额: {
          field: "realMoney",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        提现折扣: {
          field: "fee",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
      },
      id: "", //会员id
      loading: true, // 表单加载状态
      selectDate: null, // 选择时间段
      shouruSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        memberId: this.memberId,
        start: "",
        startDate: "",
        endDate: "",
      }, //充值钱包收入
      shouruColumns: [
        {
          title: "序号",
          type: "index",
        },
        {
          title: "会员昵称",
          key: "nickName",
          width: 150,
        },
        {
          title: "手机号码",
          key: "mobile",
          tooltip: true,
        },
        {
          title: "级别",
          key: "gradeIdName",
          tooltip: true,
        },
        {
          title: "区域",
          key: "locationName",
          width: 250,
        },
        {
          title: "流水号",
          key: "receivableNo",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "收入时间",
          key: "incomeTime",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "收入类型",
          key: "incomeTypeName",
          tooltip: true,
          width: "100",
        },
        {
          title: "订单焕贝额",
          key: "money",
        },
        {
          title: "邮费焕贝额",
          key: "freightPrice",
        },
        {
          title: "合计焕贝额",
          key: "allMoney",
        },
      ], //充值钱包-支出
      zhichuColumns: [
        {
          title: "序号",
          type: "index",
        },
        {
          title: "会员昵称",
          key: "nickName",
          width: 150,
        },
        {
          title: "手机号码",
          key: "mobile",
          tooltip: true,
        },
        {
          title: "级别",
          key: "gradeIdName",
          tooltip: true,
        },
        {
          title: "区域",
          key: "locationName",
          width: 250,
        },
        {
          title: "流水号",
          key: "receivableNo",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "支出时间",
          key: "expenditureTime",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "支出类型",
          key: "expenditureTypeName",
          tooltip: true,
          width: "100",
        },
        {
          title: "焕贝额",
          key: "money",
        },
        {
          title: "手续费",
          key: "handlingMoney",
        },
        {
          title: "对应现金额",
          key: "realMoney",
        },
        {
          title: "提现折扣",
          key: "fee",
        },
        {
          title: "操作",
          key: "action",
          fixed: "right",
          // minWidth: 100,
          render: (h, params) => {
            let arr = []
            arr.push(h(
              "Button", {
              props: {
                type: "info",
                size: "small",
              },
              style: {
                marginRight: "5px",
              },
              on: {
                click: () => {
                  this.koulvDetail(params.row)
                },
              },
            },
              "扣率信息"
            ))
            return h("div", arr)
          },
        }
      ], //充值钱包-支出
      receiptRecordData: [],
      receiptRecordTotal: 0, //发票记录总条数
      receiptRecordSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        start: "",
        startDate: "",
        endDate: "",
      },
      IncomeByPageCount: {},
    }
  },
  methods: {
    // 跳转到扣率信息详情
    koulvDetail (row) {
      this.$router.push({
        name: "koulvInfo-detail",
        query: {
          sn: row.receivableNo,
          expenditureTypeName: row.expenditureTypeName
        }
      })
    },
    // 收入导出订单
    async exportOrder () {
      const params = JSON.parse(JSON.stringify(this.shouruSearchForm))
      params.pageNumber = 1
      params.pageSize = 999999999
      const result = await API_Member.getIncomeSale(params)
      if (result.success) {
        if (result.result.records.length === 0) {
          this.$Message.warning("暂无可导出数据")
          return []
        } else {
          return result.result.records
        }
      } else {
        this.$Message.warning("导出数据失败，请重试")
      }
    },
    // 支出导出
    async exportOrderZC () {
      const params = JSON.parse(JSON.stringify(this.shouruSearchForm))
      params.pageNumber = 1
      params.pageSize = 999999999
      const result = await API_Member.getBranchSale(params)
      if (result.success) {
        if (result.result.records.length === 0) {
          this.$Message.warning("暂无可导出数据")
          return []
        } else {
          return result.result.records
        }
      } else {
        this.$Message.warning("导出数据失败，请重试")
      }
    },
    // 重置
    handleReset (value) {
      console.log(value)
      this.selectDate = ""
      this.shouruSearchForm = {
        // 请求参数
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        memberId: this.memberId,
        start: "",
        startDate: "",
        endDate: "",
      }
      if (value == "shouru") {
        this.shouruData()
      } else {
        this.zhichu()
      }
    },
    init () {
      //收入
      this.shouruData()
    },
    memberInfoChange (v) {
      if (v == "shouru") {
        this.shouruData()
      }
      if (v == "zhichu") {
        (this.shouruSearchForm = {
          pageNumber: 1, // 当前页数
          pageSize: 10, // 页面大小
          memberId: this.memberId,
          start: "",
          startDate: "",
          endDate: "",
        }), //充值钱包收入
          this.zhichu()
      }
    },
    // 收入数据
    shouruData () {
      this.loading = true
      API_Member.getIncomeSale(this.shouruSearchForm).then((res) => {
        this.loading = false
        this.receiptRecordData = res.result.records
        this.receiptRecordTotal = res.result.total
        this.getIncomeByPageCountTotal()
      })
    },
    // 收入总计
    getIncomeByPageCountTotal () {
      API_Member.getIncomeSaleByPageCount(this.shouruSearchForm).then((res) => {
        this.IncomeByPageCount = res.result
      })
    },
    //收入分页
    shouruChangePage (v) {
      this.shouruSearchForm.pageNumber = v
      this.shouruData()
    },
    //收入分页
    shouruChangePageSize (v) {
      this.shouruSearchForm.pageNumber = 1
      this.shouruSearchForm.pageSize = v
      this.shouruData()
    },
    //充值钱包支出数据
    zhichu () {
      this.loading = true
      API_Member.getBranchSale(this.shouruSearchForm).then((res) => {
        this.loading = false
        this.receiptRecordData = res.result.records
        this.receiptRecordTotal = res.result.total
        this.getBranchByPageCountTotal()
      })
    },
    // 支出综合
    getBranchByPageCountTotal () {
      API_Member.getBranchSaleByPageCount(this.shouruSearchForm).then((res) => {
        this.IncomeByPageCount = res.result
      })
    },
    // 支出分页
    zhichuChangePage () { },
    // 支出分页
    zhichuChangePageSize () { },
    // 收入起止时间从新赋值
    //充值钱包收入时间选择
    selectDateRangeShouru (v) {
      if (v) {
        this.shouruSearchForm.startDate = v[0]
        this.shouruSearchForm.endDate = v[1]
      }
    },
  },

  mounted () {
    // this.id = this.$route.query.id;
    this.init()
  },
};
</script>
<style lang="scss" scoped>
@import '../../user-partner-detail.scss';
.export-excel-wrapper {
  margin-left: 10px;
}
.totleQuota {
  margin-left: auto;
  display: flex;
  align-items: center;
  p {
    padding: 0 15px;
    box-sizing: border-box;

    span {
      color: #ff5c58;
      padding-left: 10px;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
.detailTable {
  width: 50% !important;
}
.Unbind {
  background: #f56c1d;
}
/deep/.ivu-tabs-bar {
  border: none !important;
}
.storeBtn {
  // width:30px;
  display: inline;
  padding: 8px 20px;
  box-sizing: border-box;
  border-radius: 6px;
  background: #f56c1d;
  color: #ffffff;
}
.walltMoneyNumBox {
  display: flex;
  align-items: center;
  p {
    margin-right: 20px;
  }
}
</style>
